.calendar {
	position: relative;
	top: 0;
	left: 0;
	background-color: #25BBA2;
	transition: height 1s;
	&::after {
		position: absolute;
		top: 100%;
		right: 0;
		display: block;
		border-width: 1em 1em .6em 1em;
		border-style: solid;
		border-color: #fff #fff transparent #fff;
		content: '';
		z-index: 4;
	}
	&.single {
		// height: 6em;
		overflow: hidden;
	}
}
.calendar-mobile {
	box-sizing: border-box;
	color: white;
	.calendar-title {
		position: relative;
		top: 0;
		left: 0;
		z-index: 5;
		margin: 0;
		background-color: #25BBA2;
		line-height: 1.5em;
		text-align: center;
	}
	$width: 100/7;
	.calendar-week {
		position: relative;
		top: 0;
		left: 0;
		z-index: 5;
		box-sizing: border-box;
		width: 100%;
		background-color: #25BBA2;
		line-height: 1.5em;
		color: #BBE9E1;
		li {
			width: $width+vw;
			text-align: center;
		}
	}
	.calendar-day {
		display: inline-block;
		position: relative;
		top: 0;
		left: 0;
		z-index: 0;
		ul {
			box-sizing: border-box;
			// display: inline-block;
			width: 100vw;
			li {
				width: $width+vw;
				text-align: center;
			}
			&:first-child {
				text-align: right;
			}
		}
		&.single {
			&>ul {
				box-sizing: border-box;
				display: inline-block;
				padding: 0;
				width: initial;
				text-align: center;
			}
		}
		span {
			position: relative;
			top: 0;
			left: 0;
			display: inline-block;
			margin: 2px 0;
			width: 2.3em;
			height: 2.3em;
			line-height: 2.3;
			text-align: center;
			&:hover {
				border-radius: 100px;
				background-color: #FFF;
				color: #FFA410;
			}
			&.active {
				border-radius: 100px;
				background-color: #FFF;
				color: #FFA410;
			}
			&.plan {
				&::after {
					position: absolute;
					bottom: 2px;
					left: 50%;
					display: block;
					border-radius: 100px;
					width: .4em;
					height: .4em;
					background-color: #FFFFFF;
					transform: translateX(-50%);
					content: '';
				}
			}
		}
	}
}
.monthView {
	$width: 100/7;
	position: relative;
	top: 0;
	left: 0;
	// left: 50%;
	z-index: 2;
	width: 500vw;
	transition: transform 1s;
	&>.month {
		display: inline-block;
		position: absolute;
		top: 0;
		left: 0;
		width: 100vw;
		transition: transform 1s;
		z-index: 2;
		&>ul {
			width: 100vw;
			background-color: #25BBA2; 
			&>li {
				width: $width+vw;
				text-align: center;
			}
			&:first-child {
				text-align: right;
			}
		}
		&.one {
			transform: translateX(-100%);
			left: -100vw;
			z-index: 2;
		}
		&.three {
			transform: translateX(100%);
			left: 100vw;
			z-index: 2;
		}
		span {
			position: relative;
			top: 0;
			left: 0;
			display: inline-block;
			margin: 2px 0;
			width: 2.3em;
			height: 2.3em;
			line-height: 2.3;
			text-align: center;
			&:hover {
				border-radius: 100px;
				background-color: #FFF;
				color: #FFA410;
			}
			&.active {
				border-radius: 100px;
				background-color: #FFF;
				color: #FFA410;
			}
			&.plan {
				&::after {
					position: absolute;
					bottom: 2px;
					left: 50%;
					display: block;
					border-radius: 100px;
					width: .4em;
					height: .4em;
					background-color: #FFFFFF;
					transform: translateX(-50%);
					content: '';
				}
			}
		}
	}
}